<template>
  <el-dialog
    v-model="visible"
    title="图片上传"
    width="600"
    :before-close="handleClose"
    :modal="false"
  >
    <div class="main" v-loading="loading">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="uploadFormRef"
        label-width="100px"
      >
        <el-form-item
          label="上传图片："
          prop="region"
          v-if="ruleForm.type == 0"
          class="tw-mt-2"
        >
          <div class="acea-row">
            <div class="uploadCont">
              <el-upload
                ref="uploadRef"
                :http-request="customUpload"
                list-type="picture-card"
                :on-change="fileChange"
                :file-list="ruleForm.imgList"
                :auto-upload="false"
                :multiple="true"
                :limit="limit"
              >
                <icon icon="ri-image-add-line" size="24"></icon>
                <template #file="{ file }">
                  <div class="img-box">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                  </div>
                </template>
              </el-upload>
              <div class="tips">
                建议上传图片最大宽度750px，不超过2MB；仅支持jpeg、jpg、png格式，可拖拽调整上传顺序
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false" :disabled="loading">取消</el-button>
        <el-button
          type="primary"
          @click="submitUpload"
          :loading="loading"
          :disabled="isSubmitting"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import attachApi from "@/apis/system/upload.js";
import { uploadRequest } from "./js/utils";
import { message } from "@/utils/message";

const emit = defineEmits(["uploadSuccess"]);

const uploadRef = ref(null);
const uploadFormRef = ref(null);
const visible = ref(false);
const loading = ref(false);
const isSubmitting = ref(false); // 防止重复点击
const limit = ref(20);

const ruleForm = ref({
  type: "0",
  region: "",
  imgList: [],
});

const rules = ref({});

const fileChange = () => {};

const open = () => {
  visible.value = true;
  isSubmitting.value = false;
};

const handleClose = () => {
  visible.value = false;
  isSubmitting.value = false;
};

const initData = () => {
  ruleForm.value = {
    type: "0",
    region: "",
    imgList: [],
  };
  isSubmitting.value = false;
};

// 点击上传按钮逻辑
const submitUpload = () => {
  if (isSubmitting.value || loading.value) return;
  isSubmitting.value = true;
  uploadRef.value.submit();
};

// 自定义上传方法
const customUpload = async (options) => {
  loading.value = true;

  const actualFile = options.file;
  const formData = new FormData();
  formData.append("file", actualFile);
  formData.append("type", ruleForm.value.type);
  formData.append("region", ruleForm.value.region);

  try {
    const res = await attachApi.uploadImage(formData);
    if (res.code === 200) {
      emit("uploadSuccess");
      message("上传成功", { type: "success" });
      initData();
      visible.value = false;
    } else {
      message(res.msg || "上传失败", { type: "error" });
    }
  } catch (err) {
    message(err.message || "上传异常", { type: "error" });
  } finally {
    loading.value = false;
    isSubmitting.value = false;
  }
};

defineExpose({ open });
</script>

<style lang="less">
.uploadCont .el-upload--picture-card,
.el-upload-list--picture-card .el-upload-list__item {
  width: 64px;
  height: 64px;
  line-height: 72px;
  overflow: inherit;
}
.uploadCont .el-upload--picture-card,
.el-upload-list--picture-card .el-upload-list__item img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 6px;
  object-fit: cover;
}
.tips {
  font-size: 12px;
  color: #bbbbbb;
}
.img-box {
  position: relative;
  width: 100%;
  height: 100%;
  .delbtn {
    position: absolute;
    width: 20px;
    height: 20px;
    right: -5px;
    top: -5px;
    background: red;
  }
}
</style>
